
import { OptimizeUnitPipe } from "./../../pipes/optimize-unit.pipe";
const MAIN_COLOR = "#FF7B00";

let unitOptimize = new OptimizeUnitPipe();
let fillStyle = document.createElement("canvas").getContext("2d").createLinearGradient(0, 0, 0, 150);
fillStyle.addColorStop(1, MAIN_COLOR);
fillStyle.addColorStop(0.8, "rgba(255,123,0,0.3)");
fillStyle.addColorStop(0, "rgba(255,123,0,0)");

export class ChartColor {
  backgroundColor: 'rgba(148,159,177,0.2)';
  borderColor: 'rgba(148,159,177,1)';
  pointBackgroundColor: 'rgba(148,159,177,1)';
  pointBorderColor: '#fff';
  pointHoverBackgroundColor: '#fff';
  pointHoverBorderColor: 'rgba(148,159,177,0.8)';
}

export const CHART_COLORS = [{
  backgroundColor: fillStyle,
  borderColor: MAIN_COLOR,
  pointBackgroundColor: MAIN_COLOR,
  pointBorderColor: MAIN_COLOR,
  pointHoverBackgroundColor: MAIN_COLOR,
  pointHoverBorderColor: 'rgba(148,159,177,0.8)'
}];

export const CHART_OPTIONS = {
  legend: {
    display: false
  },
  scales: {
    // xAxes: [{
    //   // type: "linear",
    //   ticks: {
    //     autoSkip: false,
    //     callback: (label, index, all) => {
    //       if (index + 1 == Math.ceil(all.length / 2)) return `${label}`;
    //       return index === 0 || index === all.length - 1  ? label : null;
    //     }
    //   }
    // }],
    yAxes: [{
      type: "linear",
      ticks: {
        // stepSize: 5000000,
        callback: (label, index) => {
          return unitOptimize.transform(label, 10000, 0, 0);
        }
      }
    }]
  },
  tooltips: {
    mode: "index",
    intersect: true
  },
  elements: {
    point: {
      radius: 1
    },
    line: {
      borderWidth: 1,
      borderColor: "#FF7B00",
      fill: true,
    }
  },
  alwaysLable: false
};